import { LegacyRef, useEffect, useRef, useState, ReactText } from 'react';
import { Map, Marker, CustomOverlay, ScaleControl, ZoomControl } from 'react-bmapgl';
import whiteStyle from '../../../../../public/custom_map_config.json';
import { request } from 'umi';
import { api } from '@/global';

type resultType = {
  createTime: string;
  deptId: number;
  id: string;
  storageAddress: string;
  storageLatitude: string;
  storageLongitude: string;
  storageName: string;
};

const CircleInfo = (props: any) => {
  return (
    <div
      style={{
        height: 60,
        width: 60,
        backgroundColor: '#a4c9cc',
        borderRadius: '50%',
        opacity: '60%',
        borderStyle: 'solid',
        borderColor: '#509296',
        textAlign: 'center',
        fontSize: 10,
      }}
    >
      <div
        style={{ height: '100%', width: '100%', textAlign: 'center', fontSize: 8, marginTop: 12 }}
      >
        {props.name}
      </div>
    </div>
  );
};

type propsType = {
  selectedRowKeys: ReactText[];
};

export default (props: propsType) => {
  const mapRef = useRef<LegacyRef<any>>();
  const [lng, SetLng] = useState<number>();
  const [lat, SetLat] = useState<number>();
  const [resultList, SetResultList] = useState<resultType[]>();

  const getDate = async () => {
    const result = await request(api.getStorageListByIds, {
      params: {
        ids: JSON.stringify(props.selectedRowKeys) ? JSON.stringify(props.selectedRowKeys) : '[]',
      },
    });
    SetResultList(result.data);
  };

  useEffect(() => {
    const myGeo = new window.BMapGL.Geocoder();

    myGeo.getPoint(
      '山西工程技术学院图书馆',
      (point) => {
        if (point) {
          SetLng(point.lng);
          SetLat(point.lat);
        }
      },
      '阳泉',
    );
    getDate();
  }, [props]);

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <Map
        ref={mapRef}
        center={new BMapGL.Point(lng, lat)}
        zoom={18}
        mapStyleV2={{ styleJson: whiteStyle }}
        tilt={12}
      >
        <ScaleControl />

        <ZoomControl />

        {resultList &&
          resultList.map((item) => {
            return (
              <CustomOverlay
                key={item.id}
                position={new BMapGL.Point(item.storageLongitude, item.storageLatitude)}
              >
                <CircleInfo name={item.storageName} />
              </CustomOverlay>
            );
          })}
      </Map>
    </div>
  );
};
